Publicar una página web en github

Más información en https://docs.github.com/es/pages/getting-started-with-github-pages/creating-a-github-pages-site

Crear una cuenta en github

Ir a https://github.com/signup y llenar el formulario para crear una cuenta.

Es necesario registrarse con un corre electronico.

Crear un nuevo repositorio

En la página principal, autenticadas con su cuenta, busquen el ícono + en el costado superior derecho.

Señalado con el recuadro rojo en la siguiente captura

En el menú desplegado, seleccionar New repository

En el formulario para crear el repositorio escribimos el nombre, en mi caso tm1

Dejamos el resto de campos por defecto y presionamos Create repository

Subir index.html al repositorio

En el repositorio creado presionamos el enlace uploading an existing file en la sección inferior de Quick setup

Agregamos al repositorio el archivo index.html que encuentran en el siguiente enlace

se abrirá la siguiente página, para guardarla en un archivo usen la combinación de teclas Ctrl + s y guarden el archivo index.html o click derecho y Save as... o Guardar como...

En el panel de github arrastran el index.html que descargaron o seleccionan choose your files y seleccionan el archivo mencionado.

  1. Deben ver el archivo index.html en la parte media de la interfaz.
  2. Escriban un comentario al cambio que describa lo que estan haciendo.
  3. Pulsen el botón Commit changes.

Deben tener algo similar a la siguiente captura

Ahora vamos a crear la carpeta images y styles.

Crear archivos y directorios desde la interfaz web

En la interfaz del repositorio ubicamos y pulsamos en el botón Add file, en el menú desplegado pulsamos Create new file

Para poder crear un directorio o folder debemos crear un archivo interno.

  1. En la parte superior izquierda, en el campo de escritura escribimos images/empty lo que al final de escribir se vera como en la imagen.
  2. Pulsamos el botón Commit changes....

En la ventana desplegada escribimos un mensaje que describa el cambio y pulsamos Commit changes.

Obtenemos la carpeta images con el archivo vacio empty, en esa carpeta subiremos la siguiente imagen.

Pulsamos el botón Add file en el costado derecho de la interfaz, y realizamos el mismo proceso que hicimos al subir index.html.

Ahora vamos a crear el archivo styles/style.css.

Nos ubicamos en la carpeta raíz del repositorio pulsando el enlace del nombre de nuestro repositorio en el costado izquierdo superior.

Pulsamos de nuevo Create new file

En el campo del costado superior izquierdo escribimos styles/style.css y obtendremos la siguiente pantalla.

Del siguiente enlace, copiamos y pegamos el texto en nuestro repositorio.

Como se ve en la siguiente imagen

y pulsamos el botón Commit changes..., agregamos un comentario y pulsamos Commit changes.

Crear la página pública

En el menú principal del repositorio, ubicamos el menú settings e ingresamos pulsando el botón.

En el costado izquierdo de la pantalla ubicamos y pulsamos en Pages.

En el centro de la pantalla, en la sección Branch o Rama debemos cambiar None por main y pulsamos el botón save.

Volvemos al menú principal pulsando el botón superior izquierdo con el nombre de nuestro repositorio

Veremos un nuevo menú en el costado derecho inferior Deployments, pulsamos el enlace en ese apartado.

En la página de Deployments obtenemos en enlace de nuestra página web pública.

Al pulsar ese enlace tendremos la página pública

Modificar los contenidos

Volvemos a la página principal del repositorio y seleccionamos el archivo index.html

Ubicamos y pulsamos el ícono de lapiz en el costado derecho Edit this file

Modificamos los textos del archivo, por ejemplo, el texto del titulo ubicado en la etiqueta <h1> en la linea 12 del archivo.

Tambien cambiamos la imagen, copiamos y pegamos un enlace de una imagen de internet en el atributo src="aqui el enlace" ejemplo:

Luego se hace el commit como lo hemos visto en instrucciones pasadas pulsando Commit changes... escribimos un mensaje que describa el cambio y luego Commit cahnges.

Obtenemos en el enlace de la página pública lo siguiente

Instrucción para el entregable

Hagan varios cambios, exploren modificando el archivo style.css en la carpeta de styles.

Copien, peguen, reescriban secciones de index.html.

El entregable debe ser el enlace de la página pública del repositorio.

Por ejemplo: https://ruidajo.github.io/tm1/

El repositorio debe tener por lo menos 10 commits que muestran los cambios que fueron creando.